<script lang="ts" setup>
import BwipJs from 'bwip-js';
import { onMounted, ref } from 'vue';
const props = defineProps(['text', 'flag1'])
import BarcodeGenerator1 from './BarcodeGenerator1.vue';
const barcodeCanvasRef = ref('123456789012')
const show = ref(false);
const flag1 = ref(false)
const msg = ref('45646134654645')
//随机生成两位数的数
const randomNum = () => {
    return Math.floor(Math.random() * 90) + 10;
}
//随机生成四位数的数
const randomNum1 = () => {
    return Math.floor(Math.random() * 9000) + 1000;
}
console.log(randomNum1());

//生成条形码
const generateBarcode = () => {
    BwipJs.toCanvas(barcodeCanvasRef.value, {
        bcid: 'code128',//条形码类型
        text: props.text,
        scale: 3,//缩放比例
        height: 10,//条形码高度
        includetext: false,//是否包含文本
        textxalign: 'center'//文本对齐方式
    })
}
//跳转到弹窗
const zhuan = () => {
    show.value = true;
}
const Jump = () => {
    flag1.value = true
}
const pppp = () => {
    flag1.value = false
    show.value = false
}
onMounted(() => {
    generateBarcode()
    randomNum()
    randomNum1()
})
</script>

<template>
    <!-- 可以根据输入的数据来自行生成条形码 -->
    <!-- <input v-model="text" placeholder="输入文本生成条形码" aria-label="输入文本" />
      <button @click="generateBarcode" aria-label="生成条形码">生成条形码</button> -->
    <canvas ref="barcodeCanvasRef" style="margin-top: 10px;" @click="zhuan"></canvas>
    <van-popup v-model:show="show" position="top" :style="{ height: '100%' }">
        <div class="pp">
            <p>
                付款码数字仅用于支付时向收银员展示,请勿发送给他人,以防诈骗
            </p>
            <button class="oo" @click="Jump">知道了</button>
        </div>
    </van-popup>
    <van-popup v-model:show="flag1" position="top" :style="{ height: '100%' }">
        <div class="ppp">
            <p> 付款码数字仅用于支付时向收银员展示,请勿泄露以防诈骗</p>
            <p
                style="display: flex;justify-content: space-between;margin-top: 10px;font-weight: bold;font-size: 20px;width: 448px;">
                <span>{{ randomNum() }}</span> <span> {{ randomNum1() }}</span><span>{{ randomNum1() }}</span><span>{{ randomNum1() }}</span><span>{{ randomNum1() }}</span></p>
            <BarcodeGenerator1 @click="pppp"></BarcodeGenerator1>
        </div>
    </van-popup>
</template>

<style scoped>
.oo {
    width: 200px;
    height: 30px;
    border: none;
    border-radius: 5px;
    margin-right: -90px;
}

.pp {
    writing-mode: horizontal-tb;
    transform: rotate(90deg);
    margin-top: 70%;
}

.ppp {
    width: 448px;
    writing-mode: horizontal-tb;
    transform: rotate(90deg);
    margin-top: 63%;
    margin-left: -40px;
}

.ppp p {
    width: 400px;
}

.pp p {
    width: 450px;
    font-size: 15px;
}

.pp button {
    margin-top: 20px;
}
</style>
